<!-- components/ActivityTabs.vue -->
<template>
  <el-card class="activity-tabs-card">
    <h2 class="section-title mb-4">家族活动</h2>
    <el-tabs v-model="activeTab" class="clan-tabs">
      <el-tab-pane label="进行中" name="ongoing">
        <ActivityList :status="1" />
      </el-tab-pane>
      <el-tab-pane label="未开始" name="pending">
        <ActivityList :status="0" />
      </el-tab-pane>
      <el-tab-pane label="已结束" name="completed">
        <ActivityList :status="-1" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ActivityList from './ActivityList.vue';

const activeTab = ref('ongoing');
</script>

<style lang="scss" scoped>
.activity-tabs-card {
  background: linear-gradient(135deg, #f0f8f5 0%, #e8f5f0 100%);
  border: 1px solid #b3d9c9;
  padding: 1.2rem;
}

.clan-tabs {
  .el-tabs__header {
    margin-bottom: 1.2rem;
    
    .el-tabs__nav-wrap {
      &::after {
        height: 0;
      }
      
      .el-tabs__nav-scroll {
        background: #e0f2e9;
        border-radius: 0.8rem;
        padding: 0.3rem;
      }
      
      .el-tabs__item {
        height: 2.8rem;
        line-height: 2.8rem;
        border-radius: 0.6rem;
        color: #5a4a3a;
        font-weight: 500;
        margin-right: 0.5rem;
        background: #f0f8f5;
        border: 1px solid #b3d9c9;
        transition: all 0.3s ease;
        
        &:hover {
          background: #d4e9e0;
        }
        
        &.is-active {
          background: #964b00;
          color: #fff;
          border-color: #964b00;
          box-shadow: 0 2px 8px rgba(150, 75, 0, 0.2);
        }
      }
    }
  }
  
  .el-tab-pane {
    padding: 0;
  }
}
</style>